<template>
  <el-drawer v-model="drawerOpenBool" :title="chartViewQueryParams.title" direction="rtl" :before-close="handleClose">
    <div v-loading="loading" style="position:relative;top:-15px;">
      <div v-if="chartViewQueryParams.dataType=='人口建筑物经济公里格网'">
        <el-radio-group v-model="queryParams.queryType" @change="queryEchartByParams">
          <el-radio label="0">按省统计</el-radio>
          <el-radio label="1">按市统计</el-radio>
          <el-radio label="2">按区县统计</el-radio>
        </el-radio-group>
        <br/>
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">人口总数</el-radio-button>
          <el-radio-button label="2">GDP</el-radio-button>
          <el-radio-button label="3">建筑面积</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='应急避难场所'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">个数</el-radio-button>
          <el-radio-button label="2">可容纳总人数</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='地形地貌（坡度）'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">坡度</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='交通（机场）'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">机场</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='水库'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">水库</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='学校'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">学校</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='地质灾害'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">地质灾害</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='断层'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">断层</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='次生灾害危险源（危化企业）'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">危化企业</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='次生灾害危险源（加油站）'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">加油站</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='医院'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">医院</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='房屋抗震能力分区图'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">房屋抗震能力分区图</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='建筑物单体数据'">
        <el-radio-group v-model="queryParams.buildingFlag" @change="queryEchartByParams">
          <el-radio label="0">按结构类型统计</el-radio>
          <el-radio label="1">统计抗震能力</el-radio>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='抽样调查点概况信息'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">抽样调查点概况信息</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="chartViewQueryParams.dataType=='灾害风险点信息'">
        <el-radio-group v-model="queryParams.type" @change="showEchartData">
          <el-radio-button label="1">灾害风险点信息</el-radio-button>
        </el-radio-group>
      </div>
      <!--建筑物单体数据-统计抗震能力-->
      <div v-if="chartViewQueryParams.dataType=='建筑物单体数据' && queryParams.buildingFlag=='1'" style="margin-bottom:10px;">
        <el-radio-group v-model="queryParams.queryType" @change="queryEchartByParams">
          <el-radio label="0">按省统计</el-radio>
          <el-radio label="1">按市统计</el-radio>
          <el-radio label="2">按区县统计</el-radio>
        </el-radio-group>
        <el-button plain @click="clearChartMapLayer">清空地图统计结果</el-button>
      </div>
      <!--空间统计图表-->
      <div style="width:100%;height:500px;border: 1px solid gray;">
        <div id="spaceDataChart" style="width:100%;height:100%;"></div>
      </div>
    </div>
  </el-drawer>
</template>
<script setup name="ChartsView">
import * as echarts from 'echarts';
import { ElMessageBox } from 'element-plus';
import { queryChartDataByType } from "@/api/basedatamanage/spaceData";

const { proxy } = getCurrentInstance();

const props = defineProps({
  chartViewQueryParams: {//空间统计查询参数
    default: {},
    type: Object,
  },
});
const { chartViewQueryParams } = toRefs(props);
const loading = ref(false);
const drawerOpenBool = ref(false);
var thisChart = null;//图表对象
//初始化数据
const data = reactive({
  queryParams: {//空间统计查询参数
    province: "",
    city: "",
    county: "",
    provinceId: "",
    cityId: "",
    countyId: "",
    dataType: "",//数据类型
    geomText: "",//地图圈选空间数据
    type:"1",//数据查询类型
    queryType:"",//统计类型：0省1市2区县，全国为空""
    buildingFlag:"0",//建筑物单体数据统计 0:按结构类型统计 1:统计抗震能力
  },
  queryParamsFormData:{
    type:"",//查询数据类型
    flag:"",//选择省市区标识统计 0:省 1:市 2:区，全国为空""
    province: "",//省
    city: "",//市
    area: "",//区
    provinceId: "",//省id
    cityId: "",//市id
    areaId: "",//区id
    geomText: "",//地图圈选空间数据
    buildingFlag:"",//建筑物单体数据统计 0:按结构类型统计 1:统计抗震能力
  }
});
let {
  queryParams,queryParamsFormData
} = toRefs(data);

const emits = defineEmits(['hideChartView','showChartMapData']);

//关闭事件
const handleClose = () => {
  ElMessageBox.confirm('是否确定关闭空间统计结果窗口?', '系统提示', {cancelButtonClass: 'is-plain'})
      .then(() => {
        //关闭
        drawerOpenBool.value = false;
        //关闭空间统计
        emits("hideChartView", false);
      })
      .catch(() => {
        // catch error
      })
}

//清空统计抗震能力地图结果图层
const clearChartMapLayer = ()=> {
  //地图显示结果
  emits("showChartMapData", null);
}

/**
 * 坡度 :3
 * 人口建筑物经济公里格网 :4
 * 机场 :6
 * 水库 :7
 * 学校 :8
 * 医院 :9
 * 地质灾害数据:10
 * 活动断层:
 * 危化企业:12
 * 加油（加气）站:13
 * 应急避难场所:14
 * 基于遥感的房屋抗震能力初步评估数据	:15
 * 建筑物单体数据:16
 * 抽样调查点概况信息:17
 * 灾害风险点信息:18
 */
//获取查询数据类型
const getQueryTypeNumber = ()=>{
  let number = "";
  let dataType = queryParams.value.dataType;
  if(dataType=="地形地貌（坡度）"){
    number = "3";
  }else if(dataType=="人口建筑物经济公里格网"){
    number = "4";
  }else if(dataType=="交通（机场）"){
    number = "6";
  }else if(dataType=="水库"){
    number = "7";
  }else if(dataType=="学校"){
    number = "8";
  }else if(dataType=="地质灾害"){
    number = "10";
  }else if(dataType=="断层"){
    //number = "";
    //显示空间统计图表--test
    showEchartData();
  }else if(dataType=="次生灾害危险源（危化企业）"){
    number = "12";
  }else if(dataType=="次生灾害危险源（加油站）"){
    number = "13";
  }else if(dataType=="应急避难场所"){
    number = "14";
  }else if(dataType=="医院"){
    number = "9";
  }else if(dataType=="房屋抗震能力分区图"){
    number = "15";
  }else if(dataType=="建筑物单体数据") {
    number = "16";
  }else if(dataType=="抽样调查点概况信息") {
    number = "17";
  }else if(dataType=="灾害风险点信息") {
    number = "18";
  }

  return number;
}

//查询空间统计结果
const queryEchartByParams = () => {
  // 图表销毁
  if (thisChart!=null) {
    thisChart.dispose();
    thisChart = null;
  }
  let number = getQueryTypeNumber();
  if(number==""){
    //proxy.$modal.msgWarning("无空间统计查询结果");
    return;
  }
  loading.value = true;
  queryParamsFormData.value.type = number;
  queryParamsFormData.value.flag = queryParams.value.queryType;//选择省市区标识统计 0:省 1:市 2:区
  queryParamsFormData.value.province = queryParams.value.province;//省
  queryParamsFormData.value.city = queryParams.value.city;//市
  queryParamsFormData.value.area = queryParams.value.county;//区
  queryParamsFormData.value.provinceId = queryParams.value.provinceId;//省Id
  queryParamsFormData.value.cityId = queryParams.value.cityId;//市Id
  queryParamsFormData.value.areaId = queryParams.value.countyId;//区Id
  queryParamsFormData.value.geomText = queryParams.value.geomText;//地图圈选空间数据
  if(number=="16"){//建筑物单体数据
    //清空统计抗震能力地图结果图层
    clearChartMapLayer();
    queryParamsFormData.value.buildingFlag = queryParams.value.buildingFlag;//建筑物单体数据统计 0:按结构类型统计 1:统计抗震能力
  }else{
    queryParamsFormData.value.buildingFlag = "";
  }
  nextTick(() => {
    console.log("queryParams.value");
    console.log(queryParams.value);
    console.log("queryParamsFormData.value");
    console.log(queryParamsFormData.value);
    //空间统计查询
    queryChartDataByType(queryParamsFormData.value).then((response) => {
      nextTick(() => {
        let result = response.data;
        console.log(result);
        loading.value = false;
        resultData.value = result;
        //显示空间统计图表
        showEchartData();
      });
    }).catch(err => {
      loading.value = false;
    });
  });
}
const resultData = ref(null);
//查询空间统计结果
const showEchartData = () => {
  // 图表销毁
  if (thisChart!=null) {
    thisChart.dispose();
    thisChart = null;
  }
  //空间统计查询参数
  nextTick(() => {
    let result = resultData.value;
    if(result==null){
      proxy.$modal.msgWarning("无空间统计查询结果");
      return;
    }
    let dataType = queryParams.value.dataType;
    if(dataType=="行政区划"){
      //不统计
    }else if(dataType=="地形地貌（高程）"){
      //不统计
    }else if(dataType=="地形地貌（坡度）"){
      let legendArray = ["0°~30°", "31°~45°","46°~60°","大于60°"];//4个图例
      let xDataArray = ["坡度（°）"];//1项数据
      //let data1 = ["300"];//0°~30°
      //let data2 = ["30"];//31°~45°
      //let data3 = ["70"];//46°~60°
      //let data4 = ["20"];//大于60°
      let slopeYList = result.slopeYList;
      let data1 = [slopeYList[0]];//0°~30°
      let data2 = [slopeYList[1]];//31°~45°
      let data3 = [slopeYList[2]];//46°~60°
      let data4 = [slopeYList[3]];//大于60°
      let yName = "面积（平方公里）";
      //4个图例n项数据
      echartRender4(legendArray,xDataArray,data1,data2,data3,data4,yName,dataType);
    }else if(dataType=="人口建筑物经济公里格网"){
      let type = queryParams.value.type;//1:人口总数 2:GDP 3:建筑面积
      if(type=="1"){//人口总数
        let legendArray = ["人口总数"];//1个图例
        //let xDataArray = ["东城区","西城区","海淀区","石景山区","丰台区"];
        //let dataArray = ["1000","3000","20000","4000","5000"];
        let xDataArray = result.populationXList;
        let dataArray = result.populationYList;
        let yName = "万人";
        if(dataArray==null || dataArray.length==0 || xDataArray==null || xDataArray.length!=dataArray.length){
          proxy.$modal.msgWarning("无空间统计查询结果");
          return;
        }
        if(dataArray.length>7){
          //1个图例n项数据--数据区域可平移缩放（人口建筑物经济公里格网|建筑物单体数据统计抗震能力）
          echartRender2(legendArray,xDataArray,dataArray,yName,dataType);
        }else{
          //1个图例n项数据
          echartRender(legendArray,xDataArray,dataArray,yName,dataType);
        }
      }else if(type=="2"){//GDP
        let legendArray = ["GDP"];//1个图例
        //let xDataArray = ["东城区","西城区","海淀区","石景山区","丰台区"];
        //let dataArray = ["100","300","200","400","500"];
        let xDataArray = result.gdpXList;
        let dataArray = result.gdpYList;
        let yName = "亿元";
        if(dataArray==null || dataArray.length==0 || xDataArray==null || xDataArray.length!=dataArray.length){
          proxy.$modal.msgWarning("无空间统计查询结果");
          return;
        }
        if(dataArray.length>7){
          //1个图例n项数据--数据区域可平移缩放（人口建筑物经济公里格网|建筑物单体数据统计抗震能力）
          echartRender2(legendArray,xDataArray,dataArray,yName,dataType);
        }else{
          //1个图例n项数据
          echartRender(legendArray,xDataArray,dataArray,yName,dataType);
        }
      }else if(type=="3"){//建筑面积
        let legendArray = ["建筑面积"];//1个图例
        //let xDataArray = ["东城区","西城区","海淀区","石景山区","丰台区"];
        //let dataArray = ["210","230","220","240","250"];
        let xDataArray = result.coveredareaXList;
        let dataArray = result.coveredareaYList;
        let yName = "平方公里";
        if(dataArray==null || dataArray.length==0 || xDataArray==null || xDataArray.length!=dataArray.length){
          proxy.$modal.msgWarning("无空间统计查询结果");
          return;
        }
        if(dataArray.length>7){
          //1个图例n项数据--数据区域可平移缩放（人口建筑物经济公里格网|建筑物单体数据统计抗震能力）
          echartRender2(legendArray,xDataArray,dataArray,yName,dataType);
        }else{
          //1个图例n项数据
          echartRender(legendArray,xDataArray,dataArray,yName,dataType);
        }
      }
    }else if(dataType=="交通（道路）"){
      //不统计
    }else if(dataType=="交通（机场）"){
      let legendArray = ["机场"];//1个图例
      let xDataArray = ["机场"];//1项数据
      //let dataArray = ["10"];
      let data = result.airport;
      let dataArray = [data];
      let yName = "个数";
      if(!(data>=0)){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      //1个图例n项数据
      echartRender(legendArray,xDataArray,dataArray,yName,dataType);
    }else if(dataType=="水库"){
      let legendArray = ["水库"];//1个图例
      let xDataArray = ["水库"];//1项数据
      //let dataArray = ["10"];
      let data = result.reservoir;
      let dataArray = [data];
      let yName = "个数";
      if(!(data>=0)){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      //1个图例n项数据
      echartRender(legendArray,xDataArray,dataArray,yName,dataType);
    }else if(dataType=="学校"){
      let legendArray = ["学校个数"];//1个图例
      //let xDataArray = ["小学","中学","大学"];//3项数据
      //let dataArray = ["55","45","25"];
      let xDataArray = result.schoolXList;
      let dataArray = result.schoolYList;
      let yName = "个数";
      if(dataArray==null || dataArray.length==0 || xDataArray==null || xDataArray.length!=dataArray.length){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      //1个图例n项数据
      echartRender(legendArray,xDataArray,dataArray,yName,dataType);
    }else if(dataType=="地质灾害"){
      let legendArray = ["滑坡", "不稳定斜坡","危岩","泥石流"];//4个图例
      let xDataArray = ["灾害类型"];//1项数据
      //let data1 = ["20"];//滑坡
      //let data2 = ["3"];//不稳定斜坡
      //let data3 = ["7"];//危岩
      //let data4 = ["2"];//泥石流
      let disastersYList = result.disastersYList;
      if(disastersYList.length!=4){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      let data1 = [disastersYList[0]];//滑坡
      let data2 = [disastersYList[1]];//不稳定斜坡
      let data3 = [disastersYList[2]];//危岩
      let data4 = [disastersYList[3]];//泥石流
      let yName = "个数";
      //4个图例n项数据
      echartRender4(legendArray,xDataArray,data1,data2,data3,data4,yName,dataType);
    }else if(dataType=="断层"){
      let legendArray = ["全新世", "晚新世","早中更新世","前第四纪"];//4个图例
      let xDataArray = ["活动时代"];//1项数据
      let data1 = ["0"];//全新世
      let data2 = ["0"];//晚新世
      let data3 = ["0"];//早中更新世
      let data4 = ["0"];//前第四纪
      let yName = "条";
      //test
      proxy.$modal.msgWarning("无空间统计查询结果");
      //4个图例n项数据
      echartRender4(legendArray,xDataArray,data1,data2,data3,data4,yName,dataType);
    }else if(dataType=="次生灾害危险源（危化企业）"){
      let legendArray = ["一级", "二级","三级","四级"];//4个图例
      let xDataArray = ["风险等级"];//1项数据
      //let data1 = ["20"];//一级
      //let data2 = ["3"];//二级
      //let data3 = ["7"];//三级
      //let data4 = ["2"];//四级
      let riskEnterpriseYList = result.riskEnterpriseYList;
      if(riskEnterpriseYList.length!=4 || (riskEnterpriseYList[0]==null && riskEnterpriseYList[1]==null && riskEnterpriseYList[2]==null && riskEnterpriseYList[3]==null)){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      let data1 = [riskEnterpriseYList[0]];//一级
      let data2 = [riskEnterpriseYList[1]];//二级
      let data3 = [riskEnterpriseYList[2]];//三级
      let data4 = [riskEnterpriseYList[3]];//四级
      let yName = "个";
      //4个图例n项数据
      echartRender4(legendArray,xDataArray,data1,data2,data3,data4,yName,dataType);
    }else if(dataType=="次生灾害危险源（加油站）"){
      let legendArray = ["一级", "二级","三级","四级"];//4个图例
      let xDataArray = ["风险等级"];//1项数据
      //let data1 = ["10"];//一级
      //let data2 = ["2"];//二级
      //let data3 = ["6"];//三级
      //let data4 = ["1"];//四级
      let gasStationYList = result.gasStationYList;
      if(gasStationYList.length!=4 || (gasStationYList[0]==null && gasStationYList[1]==null && gasStationYList[2]==null && gasStationYList[3]==null)){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      let data1 = [gasStationYList[0]];//一级
      let data2 = [gasStationYList[1]];//二级
      let data3 = [gasStationYList[2]];//三级
      let data4 = [gasStationYList[3]];//四级
      let yName = "个";
      //4个图例n项数据
      echartRender4(legendArray,xDataArray,data1,data2,data3,data4,yName,dataType);
    }else if(dataType=="应急避难场所"){
      let type = queryParams.value.type;//1:个数 2:可容纳总人数
      if(type=="1"){//个数
        let legendArray = ["短期", "暂时","中长期"];//3个图例
        let xDataArray = ["类型"];//1项数据
        //let data1 = ["20"];//短期
        //let data2 = ["3"];//暂时
        //let data3 = ["7"];//中长期
        let emergencyshelterYList = result.emergencyshelterYList;
        if(emergencyshelterYList.length!=3 || (emergencyshelterYList[0]==null && emergencyshelterYList[1]==null && emergencyshelterYList[2]==null)){
          proxy.$modal.msgWarning("无空间统计查询结果");
          return;
        }
        let data1 = [emergencyshelterYList[0]];//短期
        let data2 = [emergencyshelterYList[1]];//暂时
        let data3 = [emergencyshelterYList[2]];//中长期
        let yName = "个";
        //3个图例n项数据
        echartRender3(legendArray,xDataArray,data1,data2,data3,yName,dataType);
      }else if(type=="2") {//可容纳总人数
        let legendArray = ["可容纳总人数"];//1个图例
        let xDataArray = ["可容纳总人数"];//1项数据
        //let dataArray = ["55"];
        let data = result.peopleTotalNumber;
        let dataArray = [data];
        let yName = "人";
        if(!(data>=0)){
          proxy.$modal.msgWarning("无空间统计查询结果");
          return;
        }
        //1个图例n项数据
        echartRender(legendArray,xDataArray,dataArray,yName,dataType);
      }
    }else if(dataType=="医院"){
      let legendArray = ["医院个数", "医疗力量（人）","床位数"];//3个图例
      let xDataArray = ["三级甲等","三级乙等","三级丙等"];//3项数据
      //let data1 = ["10","30","50"];//医院个数
      //let data2 = ["50","100","120"];//医疗力量（人）
      //let data3 = ["80","20","10"];//床位数
      let data1 = result.hospitalNumList;//医院个数
      let data2 = result.hospitalPowerList;//医疗力量（人）
      let data3 = result.hospitalBedNumList;//床位数
      let yName = "";
      if(data1==null && data2==null && data3==null){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      if(data1==null){
        data1 = [null];
      }
      if(data2==null){
        data2 = [null];
      }
      if(data3==null){
        data3 = [null];
      }
      //3个图例n项数据
      echartRender3(legendArray,xDataArray,data1,data2,data3,yName,dataType);
    }else if(dataType=="房屋抗震能力分区图"){
      let legendArray = ["估计抗震能力达标", "疑似抗震能力不足","疑似抗震能力严重不足"];//3个图例
      let xDataArray = ["抗震能力"];//1项数据
      //let data1 = ["20"];//估计抗震能力达标
      //let data2 = ["3"];//疑似抗震能力不足
      //let data3 = ["7"];//疑似抗震能力严重不足
      let kangzhenYList = result.kangzhenYList;
      if(kangzhenYList.length!=3 || (kangzhenYList[0]==null && kangzhenYList[1]==null && kangzhenYList[2]==null)){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      let data1 = [kangzhenYList[0]];//估计抗震能力达标
      let data2 = [kangzhenYList[1]];//疑似抗震能力不足
      let data3 = [kangzhenYList[2]];//疑似抗震能力严重不足
      let yName = "房屋栋数";
      //3个图例n项数据
      echartRender3(legendArray,xDataArray,data1,data2,data3,yName,dataType);
    }else if(dataType=="建筑物单体数据") {
      let type = queryParams.value.buildingFlag;//0:按结构类型统计 1:统计抗震能力
      if(type=="0") {//按结构类型统计
        let legendArray = ["高层建筑", "钢结构", "多层钢筋混凝土结构", "砖混结构", "砖木结构","土结构","木结构","石结构","其他结构"];//9个图例
        let xDataArray = ["结构类型"];//1项数据
        /*let data1 = ["30"];//高层建筑
        let data2 = ["3"];//钢结构
        let data3 = ["7"];//多层钢筋混凝土结构
        let data4 = ["40"];//砖混结构
        let data5 = ["36"];//砖木结构
        let data6 = ["10"];//土结构
        let data7 = ["36"];//木结构
        let data8 = ["10"];//石结构
        let data9 = ["20"];//其他结构*/
        let buildingYList = result.buildingYList;
        if(buildingYList==null || buildingYList.length!=9 || (buildingYList[0]==null && buildingYList[1]==null && buildingYList[2]==null && buildingYList[3]==null && buildingYList[4]==null && buildingYList[5]==null && buildingYList[6]==null && buildingYList[7]==null && buildingYList[8]==null)){
          proxy.$modal.msgWarning("无空间统计查询结果");
          return;
        }
        let data1 = [buildingYList[0]];//高层建筑
        let data2 = [buildingYList[1]];//钢结构
        let data3 = [buildingYList[2]];//多层钢筋混凝土结构
        let data4 = [buildingYList[3]];//砖混结构
        let data5 = [buildingYList[4]];//砖木结构
        let data6 = [buildingYList[5]];//土结构
        let data7 = [buildingYList[6]];//木结构
        let data8 = [buildingYList[7]];//石结构
        let data9 = [buildingYList[8]];//其他结构
        let yName = "建筑物数量";
        //9个图例n项数据
        echartRender9(legendArray,xDataArray,data1,data2,data3,data4,data5,data6,data7,data8,data9,yName,dataType);
      }else if(type=="1") {//统计抗震能力
        let buildingGeom = result.buildingGeom;//空间数据数组
        let buildingYList2 = result.buildingYList2;//统计抗震能力值数组
        let buildingXList = result.buildingXList;//省|市|区名数组
        let data = [buildingGeom,buildingYList2,buildingXList];
        if(buildingGeom==null || buildingYList2==null || buildingXList==null || buildingYList2.length==0 || buildingXList.length!=buildingYList2.length || buildingGeom.length!=buildingYList2.length){
          proxy.$modal.msgWarning("无空间统计查询结果");
          return;
        }
        //地图显示结果
        emits("showChartMapData", data);
        //柱状图
        let legendArray = ["统计抗震能力"];//1个图例
        //let xDataArray = ["河北省","北京市"];//n项数据
        //let dataArray = ["0.25","0.5"];
        let xDataArray = buildingXList;//n项数据
        let dataArray = buildingYList2;
        let yName = "数值";
        if(dataArray==null || dataArray.length==0 || xDataArray==null || xDataArray.length!=dataArray.length){
          proxy.$modal.msgWarning("无空间统计查询结果");
          return;
        }
        if(dataArray.length>7){
          //1个图例n项数据--数据区域可平移缩放（人口建筑物经济公里格网|建筑物单体数据统计抗震能力）
          echartRender2(legendArray,xDataArray,dataArray,yName,dataType);
        }else{
          //1个图例n项数据
          echartRender(legendArray,xDataArray,dataArray,yName,dataType);
        }
      }
    }else if(dataType=="抽样调查点概况信息") {
      let legendArray = ["抽样调查点"];//1个图例
      let xDataArray = ["抽样调查点"];//1项数据
      //let dataArray = ["25"];
      let data = result.samplingNum;
      let dataArray = [data];
      let yName = "个";
      if(!(data>=0)){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      //1个图例n项数据
      echartRender(legendArray,xDataArray,dataArray,yName,dataType);
    }else if(dataType=="灾害风险点信息") {
      let legendArray = ["滑坡", "崩塌", "火灾", "道路拥堵/中断", "危险品泄露","其他"];//6个图例
      let xDataArray = ["灾害风险类型"];//1项数据
      //let data1 = ["30"];//滑坡
      //let data2 = ["3"];//崩塌
      //let data3 = ["7"];//火灾
      //let data4 = ["40"];//道路拥堵/中断
      //let data5 = ["36"];//危险品泄露
      //let data6 = ["10"];//其他
      let disasterRiskYList = result.disasterRiskYList;
      if(disasterRiskYList.length!=6 || (disasterRiskYList[0]==null && disasterRiskYList[1]==null && disasterRiskYList[2]==null && disasterRiskYList[3]==null && disasterRiskYList[4]==null && disasterRiskYList[5]==null)){
        proxy.$modal.msgWarning("无空间统计查询结果");
        return;
      }
      let data1 = [disasterRiskYList[0]];//滑坡
      let data2 = [disasterRiskYList[1]];//崩塌
      let data3 = [disasterRiskYList[2]];//火灾
      let data4 = [disasterRiskYList[3]];//道路拥堵/中断
      let data5 = [disasterRiskYList[4]];//危险品泄露
      let data6 = [disasterRiskYList[5]];//其他
      let yName = "灾害个数";
      //6个图例n项数据
      echartRender6(legendArray,xDataArray,data1,data2,data3,data4,data5,data6,yName,dataType);
    }
  });
}

//1个图例n项数据
const echartRender = (legendArray,xDataArray,dataArray,yName,dataType) => {
  //test
  /*let legendArray = ["人口总数"];//1个图例
  let xDataArray = ["东城区","西城区","海淀区","石景山区","丰台区"];
  let dataArray = ["10","30","20","40","50"];*/
  //颜色样式
  let color = "rgb(65,85,198)";
  let chartDom = document.getElementById("spaceDataChart");
  thisChart = echarts.init(chartDom, 'light');
  let option = {
    legend: {
      show: true,//是否显示图例
      data:legendArray,
      orient: 'horizontal',
      align: 'left',
      x: 'center',
      y: 'bottom',
      padding:20,
      width:350,
    },
    grid: {
      show: true,
      top: 50,
      left: 20,
      right: 50,
      bottom:50,
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {show: true}
      }
    },
    tooltip: {
      confine:true,
      formatter: function (params) {
        let tip = params.marker+params.seriesName+"："+params.data;
        if(dataType=="人口建筑物经济公里格网"){//人口建筑物经济公里格网
          tip = params.marker+params.seriesName+"："+params.data+yName+"<br/>区域名称："+params.name;
        }else if(dataType=="建筑物单体数据"){//建筑物单体数据--统计抗震能力
          tip = params.marker+params.seriesName+"："+params.data+"<br/>区域名称："+params.name;
        }else if(dataType=="学校"){//学校
          tip = params.marker+params.seriesName+"："+params.data+"<br/>类型："+params.name;
        }
        return tip;
      },
    },
    xAxis: {
      show: true, //是否显示 x 轴
      type: 'category',
      data:xDataArray,
      silent: false,
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      }
    },
    yAxis: {
      show: true,//是否显示 y 轴
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      },
      name:yName,
      nameTextStyle:{
        color:'#4d4d4d',
        padding:[0,0,0,0],		//表示[上,右,下,左]的边距
      }
    },
    series: [{
      name: legendArray[0],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: color
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: dataArray,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
  };
  thisChart.setOption(option);
  thisChart.resize();
}

//1个图例n项数据--数据区域可平移缩放（人口建筑物经济公里格网|建筑物单体数据统计抗震能力）
const echartRender2 = (legendArray,xDataArray,dataArray,yName,dataType) => {
  //test
  /*let legendArray = ["人口总数"];//1个图例
  let xDataArray = ["东城区","西城区","海淀区","石景山区","丰台区"];
  let dataArray = ["10","30","20","40","50"];*/
  // 计算数据窗口范围的结束百分比
  let dataZoomEnd = (7 / dataArray.length) * 100;
  //颜色样式
  let color = "rgb(65,85,198)";
  let chartDom = document.getElementById("spaceDataChart");
  thisChart = echarts.init(chartDom, 'light');
  let option = {
    legend: {
      show: true,//是否显示图例
      data:legendArray,
      orient: 'horizontal',
      align: 'left',
      x: 'center',
      y: 'bottom',
      padding:50,
      width:350,
    },
    grid: {
      show: true,
      top: 50,
      left: 20,
      right: 50,
      bottom:80,
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {show: true}
      }
    },
    tooltip: {
      confine:true,
      formatter: function (params) {
        let tip = params.marker+params.seriesName+"："+params.data;
        if(dataType=="人口建筑物经济公里格网"){//人口建筑物经济公里格网
          tip = params.marker+params.seriesName+"："+params.data+yName+"<br/>区域名称："+params.name;
        }else if(dataType=="建筑物单体数据"){//建筑物单体数据--统计抗震能力
          tip = params.marker+params.seriesName+"："+params.data+"<br/>区域名称："+params.name;
        }
        return tip;
      },
    },
    xAxis: {
      show: true, //是否显示 x 轴
      type: 'category',
      data:xDataArray,
      silent: false,
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      }
    },
    yAxis: {
      show: true,//是否显示 y 轴
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      },
      name:yName,
      nameTextStyle:{
        color:'#4d4d4d',
        padding:[0,0,0,0],		//表示[上,右,下,左]的边距
      }
    },
    series: [{
      name: legendArray[0],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: color
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: dataArray,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    },
    // 数据区域缩放组件配置
    dataZoom: [{
      type: 'inside',
      left: 'center',
      // 数据窗口范围的起始百分比
      start: 0,
      // 数据窗口范围的结束百分比
      end: dataZoomEnd,
      // 是否锁定选择区域（或叫做数据窗口）的大小，如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放
      zoomLock: false
    },{// 手柄的icon相关配置
      handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      handleSize: '80%',
      handleStyle: {
        color: '#fff',
        shadowBlur: 3,
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowOffsetX: 2,
        shadowOffsetY: 2
      }
    }]
  };
  thisChart.setOption(option);
  thisChart.resize();
}

//3个图例n项数据--医院
const echartRender3 = (legendArray,xDataArray,data1,data2,data3,yName,dataType) => {
  //test
  /*let legendArray = ["医院个数", "医疗力量（人）","床位数"];
  let xDataArray = ["三级甲等","三级乙等","三级丙等"];
  let data1 = ["10","30","50"];//医院个数
  let data2 = ["50","100","120"];//医疗力量（人）
  let data3 = ["80","20","10"];//床位数*/
  let gridBottom = 50;
  let paddingLeft = 0;
  if(dataType=="房屋抗震能力分区图"){//房屋抗震能力分区图
    gridBottom = 80;
    paddingLeft = 20;
  }
  //颜色样式
  let colorArray = ["rgb(65,85,198)","rgb(255,126,121)","rgb(255,204,83)"];
  let chartDom = document.getElementById("spaceDataChart");
  thisChart = echarts.init(chartDom, 'light');
  let option = {
    legend: {
      show: true,//是否显示图例
      data:legendArray,
      orient: 'horizontal',
      align: 'left',
      x: 'center',
      y: 'bottom',
      padding:20,
      width:350,
    },
    grid: {
      show: true,
      top: 50,
      left: 20,
      right: 50,
      bottom:gridBottom,
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {show: true}
      }
    },
    tooltip: {
      confine:true,
      formatter: function (params) {
        let tip = params.marker+params.seriesName+"："+params.data;
        if(dataType=="房屋抗震能力分区图"){//房屋抗震能力分区图
          tip = params.marker+params.seriesName+"<br/>"+yName+"："+params.data;
        }else if(dataType=="医院"){//医院
          tip = params.marker+params.seriesName+"："+params.data+"<br/>"+"类型："+params.name;
        }
        return tip;
      },
    },
    xAxis: {
      show: true, //是否显示 x 轴
      type: 'category',
      data:xDataArray,
      silent: false,
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      }
    },
    yAxis: {
      show: true,//是否显示 y 轴
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      },
      name:yName,
      nameTextStyle:{
        color:'#4d4d4d',
        padding:[0,0,0,paddingLeft],		//表示[上,右,下,左]的边距
      }
    },
    series: [{
      name: legendArray[0],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[0]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: legendArray[1],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[1]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data2,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[2],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[2]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data3,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
  };
  thisChart.setOption(option);
  thisChart.resize();
}

//4个图例n项数据--坡度
const echartRender4 = (legendArray,xDataArray,data1,data2,data3,data4,yName,dataType) => {
  //test
  /*let legendArray = ["0°~30°", "31°~45°","46°~60°","大于60°"];
  let xDataArray = ["坡度（°）"];
  let data1 = ["300"];//0°~30°
  let data2 = ["30"];//31°~45°
  let data3 = ["70"];//46°~60°
  let data4 = ["20"];//大于60°*/
  let paddingLeft = 0;
  if(yName=="面积（平方公里）"){//地形地貌（坡度）
    paddingLeft = 70;
  }
  //颜色样式
  let colorArray = ["rgb(65,85,198)","rgb(255,126,121)","rgb(255,204,83)","rgb(114,217,255)",];
  let chartDom = document.getElementById("spaceDataChart");
  thisChart = echarts.init(chartDom, 'light');
  let option = {
    legend: {
      show: true,//是否显示图例
      data:legendArray,
      orient: 'horizontal',
      align: 'left',
      x: 'center',
      y: 'bottom',
      padding:20,
      width:350,
    },
    grid: {
      show: true,
      top: 50,
      left: 20,
      right: 50,
      bottom:50,
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {show: true}
      }
    },
    tooltip: {
      confine:true,
      formatter: function (params) {
        let tip = params.marker+params.seriesName+"："+params.data;
        if(dataType=="地形地貌（坡度）"){//地形地貌（坡度）
          tip = params.marker+params.seriesName+"<br/>"+yName+"："+params.data;
        }
        return tip;
      },
    },
    xAxis: {
      show: true, //是否显示 x 轴
      type: 'category',
      data:xDataArray,
      silent: false,
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      }
    },
    yAxis: {
      show: true,//是否显示 y 轴
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      },
      name:yName,
      nameTextStyle:{
        color:'#4d4d4d',
        padding:[0,0,0,paddingLeft],		//表示[上,右,下,左]的边距
      }
    },
    series: [{
      name: legendArray[0],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[0]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: legendArray[1],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[1]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data2,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[2],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[2]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data3,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[3],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[3]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data4,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
  };
  thisChart.setOption(option);
  thisChart.resize();
}

//6个图例n项数据--灾害风险点信息
const echartRender6 = (legendArray,xDataArray,data1,data2,data3,data4,data5,data6,yName,dataType) => {
  //test
  /*let legendArray = ["滑坡", "崩塌", "火灾", "道路拥堵/中断", "危险品泄露","其他"];//4个图例
  let xDataArray = ["灾害风险类型"];//1项数据
  let data1 = ["30"];//滑坡
  let data2 = ["3"];//崩塌
  let data3 = ["7"];//火灾
  let data4 = ["40"];//道路拥堵/中断
  let data5 = ["36"];//危险品泄露
  let data6 = ["10"];//其他
  let yName = "灾害个数";*/
  //颜色样式
  let colorArray = ["rgb(65,85,198)","rgb(255,126,121)","rgb(255,204,83)","rgb(114,217,255)","rgb(114,217,225)","rgb(114,217,105)"];
  let chartDom = document.getElementById("spaceDataChart");
  thisChart = echarts.init(chartDom, 'light');
  let option = {
    legend: {
      show: true,//是否显示图例
      data:legendArray,
      orient: 'horizontal',
      align: 'left',
      x: 'center',
      y: 'bottom',
      padding:20,
      width:350,
    },
    grid: {
      show: true,
      top: 50,
      left: 20,
      right: 50,
      bottom:80,
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {show: true}
      }
    },
    tooltip: {
      confine:true,
      formatter: function (params) {
        let tip = params.marker+params.seriesName+"："+params.data;
        return tip;
      },
    },
    xAxis: {
      show: true, //是否显示 x 轴
      type: 'category',
      data:xDataArray,
      silent: false,
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      }
    },
    yAxis: {
      show: true,//是否显示 y 轴
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      },
      name:yName,
      nameTextStyle:{
        color:'#4d4d4d',
        padding:[0,0,0,20],		//表示[上,右,下,左]的边距
      }
    },
    series: [{
      name: legendArray[0],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[0]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: legendArray[1],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[1]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data2,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[2],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[2]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data3,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[3],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[3]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data4,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[4],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[4]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data5,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[5],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[5]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data6,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
  };
  thisChart.setOption(option);
  thisChart.resize();
}

//9个图例n项数据--建筑物单体数据
const echartRender9 = (legendArray,xDataArray,data1,data2,data3,data4,data5,data6,data7,data8,data9,yName,dataType) => {
  //test
  /*let legendArray = ["高层建筑", "钢结构", "多层钢筋混凝土结构", "砖混结构", "砖木结构","土结构","木结构","石结构","其他结构"];//9个图例
  let xDataArray = ["结构类型"];//1项数据
  let data1 = ["30"];//高层建筑
  let data2 = ["3"];//钢结构
  let data3 = ["7"];//多层钢筋混凝土结构
  let data4 = ["40"];//砖混结构
  let data5 = ["36"];//砖木结构
  let data6 = ["10"];//土结构
  let data7 = ["36"];//木结构
  let data8 = ["10"];//石结构
  let data9 = ["20"];//其他结构
  let yName = "建筑物数量";*/
  //颜色样式
  let colorArray = ["rgb(65,85,198)","rgb(255,126,121)","rgb(255,204,83)","rgb(114,177,255)","rgb(124,227,225)","rgb(114,217,105)","rgb(200,55,55)","rgb(10,10,255)","rgb(255,25,25)"];
  let chartDom = document.getElementById("spaceDataChart");
  thisChart = echarts.init(chartDom, 'light');
  let option = {
    legend: {
      show: true,//是否显示图例
      data:legendArray,
      orient: 'horizontal',
      align: 'left',
      x: 'center',
      y: 'bottom',
      padding:20,
      width:350,
    },
    grid: {
      show: true,
      top: 50,
      left: 20,
      right: 50,
      bottom:100,
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {show: true}
      }
    },
    tooltip: {
      confine:true,
      formatter: function (params) {
        let tip = params.marker+params.seriesName+"："+params.data;
        return tip;
      },
    },
    xAxis: {
      show: true, //是否显示 x 轴
      type: 'category',
      data:xDataArray,
      silent: false,
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      }
    },
    yAxis: {
      show: true,//是否显示 y 轴
      splitLine: {
        show: true,
        lineStyle: {type: 'dashed'}
      },
      name:yName,
      nameTextStyle:{
        color:'#4d4d4d',
        padding:[0,0,0,25],		//表示[上,右,下,左]的边距
      }
    },
    series: [{
      name: legendArray[0],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[0]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: legendArray[1],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[1]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data2,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[2],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[2]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data3,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[3],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[3]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data4,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[4],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[4]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data5,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[5],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[5]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data6,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[6],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[6]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data7,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[7],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[7]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data8,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }, {
      name: legendArray[8],
      type: 'bar',
      label: {   // 图形上的文本标签
        show: true,
        position: 'top', // 相对位置
        rotate: 0,  // 旋转角度
        color: 'black'
      },
      itemStyle: {    // 图形的形状
        color: colorArray[8]
      },
      //barWidth: 20,  // 柱形的宽度
      barMaxWidth: 20,  // 柱形的最大宽度
      barMinHeight: 2, // 柱形的最小高度
      barGap:1,//多个并排柱子设置柱子之间的间距
      data: data9,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
  };
  thisChart.setOption(option);
  thisChart.resize();
}

//空间统计
watch(() => props.chartViewQueryParams, () => {
  if(chartViewQueryParams.value.showBool==true){
    drawerOpenBool.value = true;//显示
    //空间统计查询参数
    queryParams.value.province = chartViewQueryParams.value.province;
    queryParams.value.city = chartViewQueryParams.value.city;
    queryParams.value.county = chartViewQueryParams.value.county;
    queryParams.value.provinceId = chartViewQueryParams.value.provinceId;
    queryParams.value.cityId = chartViewQueryParams.value.cityId;
    queryParams.value.countyId = chartViewQueryParams.value.countyId;
    queryParams.value.dataType = chartViewQueryParams.value.dataType;//数据类型
    queryParams.value.geomText = chartViewQueryParams.value.geomText//地图圈选空间数据
    queryParams.value.type = "1";//数据查询类型：默认1
    let dataType = chartViewQueryParams.value.dataType;
    if(dataType=="人口建筑物经济公里格网" || dataType=="建筑物单体数据"){//按省、市、区县统计
      queryParams.value.queryType = "0";//统计类型：0省1市2县；默认0
    }else{//行政区划省市县
      if(chartViewQueryParams.value.county!=null){
        queryParams.value.queryType = "2";//统计类型：0省1市2县；默认全国为空""
      }else if(chartViewQueryParams.value.city!=null){
        queryParams.value.queryType = "1";//统计类型：0省1市2县；默认全国为空""
      }else if(chartViewQueryParams.value.province!=null){
        queryParams.value.queryType = "0";//统计类型：0省1市2县；默认全国为空""
      }else{
        queryParams.value.queryType = "";//统计类型：0省1市2县；默认全国为空""
      }
    }
    queryParams.value.buildingFlag = "0";//建筑物单体数据统计 0:按结构类型统计 1:统计抗震能力；默认0
    nextTick(() => {
      console.log("chartViewQueryParams.value");
      console.log(chartViewQueryParams.value);
      //查询空间统计结果
      queryEchartByParams();
    });
  }
}, { deep: true, immediate: true });

</script>
<style scoped lang="scss">
</style>